<template>
  <div class="orderDetail">
    <div class="container">
      <div class="status-info">
        <div class="text-info">
          <h2>订单状态</h2>
          <div class="text-status">
            <el-link v-if="true"   style="font-size: 26px"  type="success">已完成</el-link>
            <el-link v-if="false"  style="font-size: 26px" type="warning">待发货</el-link>
            <el-link v-if="false"  style="font-size: 26px" type="danger">未付款</el-link>
            <el-link v-if="false"  style="font-size: 26px" type="info">待评价</el-link>
          </div>
          <div class="opration">

          </div>
        </div>
        <div class="status">
          <StatusOne v-if="false"></StatusOne>
          <StatusTwo v-if="false"></StatusTwo>
          <StatusThree v-if="false"></StatusThree>
          <StatusFour v-if="true"></StatusFour>
          <div class="text">
            感谢您的使用 期待您的下次惠顾!
          </div>
        </div>
      </div>
      <div class="address-info">
        <table>
          <tr>
            <td>收货人</td>
            <td>联系电话</td>
            <td>详细地址</td>
            <td>地址邮编</td>
          </tr>
          <tr>
            <td>李星河</td>
            <td>17612341234</td>
            <td>湖南省 长沙市 长沙县 大众传媒职业技术学院</td>
            <td>4251400</td>
          </tr>
        </table>
      </div>
      <div class="order-info">
        <div style="margin-top: 20px;">
          <div class="titleInfo">
            <!--订单信息-->
            <div class="RThead">
              <div>订单号</div>
              <div>下单时间</div>
              <div>订单状态</div>
              <div>应付款</div>
<!--              <div>操作</div>-->
            </div>
            <div class="content">
              <div>174674346748</div>
              <div>2022-9-20 12:46</div>
              <div>未支付</div>
              <div>￥9999</div>
<!--              <div>-->
<!--                <el-link type="success">支付</el-link>-->
<!--                <el-link type="danger">取消</el-link>-->
<!--                <el-link type="primary" @click="goTO('/orderDetail')">查看</el-link>-->
<!--              </div>-->
            </div>
          </div>
          <div class="productInfo">
            <div class="goods-detail-item" v-for="(item,index) in 4" :key="index">
              <div class="goods-detail-item-top">
                <img src="http://lixinghe.meimeng.eu.org/flower/image/20141006231606_CrJmu.jpeg" alt="图片走丢了">
              </div>
              <!--商品信息-->
              <div class="goods-info">
                <!--              内容，名字-->
                <div class="title">
                  <a >
                    夏日の花
                  </a>
                </div>
                <div class="operate">
                  <a >
                    数量 1
                  </a>
                  <a>
                    单价：99
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="order-tail">
        <div>

        </div>
        <div>
          <p><span>实付款:</span> <span>￥12300</span></p>
          <p><span>需付款:</span> <span>￥12300</span></p>
          <p><span>邮费:</span>  <span>￥12300</span></p>
          <p><span>总价格:</span> <span>￥12300</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import StatusOne from "@/components/orderStatus/StatusOne"
import StatusTwo from "@/components/orderStatus/StatusTwo"
import StatusThree from "@/components/orderStatus/StatusThree"
import StatusFour from "@/components/orderStatus/StatusFour"
{
    StatusOne,
        StatusTwo,
        StatusThree,
        StatusFour
}
</script>

<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  .orderDetail {
    .container {
      width: 1250px;
      min-height: 500px;
      border: 1px solid #999999;
      border-radius: 10px;
      margin: 0 auto;
      padding: 20px;
      box-sizing: border-box;
      .status-info {
        height: 300px;
        display: flex;
        div:nth-of-type(1){
          flex: 1;
        }
        div:nth-of-type(2){
          flex: 3;
        }
        .text-info {
          border: 1px solid #e3d8d8;
          h2 {
            font-weight: normal;
            text-align: center;
          }
          .text-status {
            margin: 20px auto 0;
            text-align: center;
          }
        }
        .status {
          .text {
            padding: 100px 0;
            font-size: 20px;
            text-align: center;
            color: #af501f;
          }
        }
      }
      .address-info {
        border: 1px solid  #e3d8d8;
        margin-top: 20px;
        padding: 10px;
        border-radius: 10px;
        table {
          font-size: 14px;
          width: 100%;
          tr {
            display: flex;
            td {
              flex: 1;
            }
            td:nth-of-type(3) {
              flex: 2;
            }
          }
          tr:nth-of-type(1) {
            height: 30px;
            border-bottom: 1px dashed #e04e1c;
          }
          tr:nth-of-type(2) {
            height: 30px;
            line-height: 30px;
          }
        }
      }
      .order-info {
        .titleInfo {
          box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
          border-radius: 10px;
          .RThead {
            display: flex;
            padding: 10px 0;
            justify-content: space-around;
            div {
              text-align: center;
              flex: 1;
            }
          }
          .content {
            padding: 10px 0;
            display: flex;
            font-size: 14px;
            justify-content: space-around;
            div {
              text-align: center;
              flex: 1;
            }
            div:last-child {
              display: flex;
              justify-content: space-evenly;
            }
          }
        }
        .productInfo {
          display: flex;
          justify-content: center;
          flex-flow: wrap;
          .goods-detail-item {
            display: inline-block;
            position: relative;
            width: 180px;
            text-align: center;
            height: 250px;
            overflow: hidden;
            margin: 10px;
            border: 1px solid gainsboro;
            /* box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); */
            border-radius: 10px;
            &:hover {
              transition: all 0.3s linear;
              box-shadow:0 0 20px #cccccc;
            }
            .goods-detail-item-top {
              overflow: hidden;
              height: 160px;
              img {
                border-radius: 10px 10px;
                width: 100%;
              }
            }
            .price {
              color: orangered;
              font-weight: bolder;
              margin: 10px;
            }
            .title {
              font-size: 12px;
              margin-top: 20px;
            }
            .title a:hover {
              color: orangered;
            }
            .operate {
              margin-top: 20px;
              display: flex;
              align-items: center;
              a {
                width: 50%;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #999999;
                cursor: pointer;
              }
              a:nth-of-type(1) {
                border-right: 1px solid antiquewhite;
              }
            }
          }
        }
      }
      .order-tail {
        display: flex;
        justify-content: space-between;
        border: 1px solid  #e3d8d8;
        p {
          display: flex;
          justify-content: space-between;
          width: 150px;
          padding: 5px;
          span:nth-of-type(2){
            font-size: 20px;
            color: red;
          }
        }
      }
    }
  }
</style>
